<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas width="600" height="600" id="huabu"></canvas>
	</body>
	<script>
		var huas=document.getElementById("huabu");
		var kai=huas.getContext('2d');
		kai.beginPath();
		kai.arc(300,200,150,2*Math.PI,0)
		kai.stroke()
		kai.beginPath();
		kai.arc(300,200,150,1.5*Math.PI,0.5*Math.PI)
		kai.stroke()
		kai.stroke();
		kai.fillStyle="#000";
		kai.fill();
		kai.beginPath();
		kai.arc(300,125,75,1.5*Math.PI,0.5*Math.PI)
		kai.stroke()
		kai.fillStyle="#FFFFFF";
		kai.fill();
		kai.beginPath();
		kai.arc(300,275,75,0.5*Math.PI,1.5*Math.PI)
		kai.stroke()
			kai.stroke();
		kai.fillStyle="#000";
		kai.fill();
		kai.beginPath();
		kai.arc(280,130,15,2*Math.PI,0)
		kai.stroke();
		
		kai.beginPath();
		kai.arc(280,130,15,2*Math.PI,0);
		
		kai.stroke();
		kai.fillStyle="#000";
		kai.fill();
		
		kai.beginPath();
		kai.arc(300,275,15,2*Math.PI,0)
		kai.stroke()
		
		kai.beginPath();
		kai.arc(300,275,15,2*Math.PI,0)
		kai.stroke();
		kai.fillStyle="#FFFFFF";
		kai.fill();
	</script>
</html>